<template>
    <div style="height: 100%;" >
        <!--<el-button @click="testOpenImg" >TestOpen</el-button>-->
            <vueWaterfallEasy style="padding-bottom: 50px;" @scroll="checkScroll"
                :imgsArr="imgsArr" @scrollReachBottom="getData"  ref="waterfallObj" @click="clickFn">
                <div  slot-scope="props" style="color: black; padding: 5px; font-size: 12px;">
                    <!--
                    <h4>{{props.value.title}}</h4>
                    <p style="">{{props.value.info}}</p>
                    -->
                </div>
                <div slot="waterfall-head" style="margin-top: 5px;margin-left: 5px; margin-bottom: 5px;" >
                    <el-tag  >活动标题</el-tag>
                    <!--<el-tag type="warning"  >活动描述</el-tag>-->
                    <el-tag type="warning"  >照片总数:134</el-tag>
                    <el-tag type="success"  >访问数:13004</el-tag>
                </div>
                <div slot="waterfall-over">没有更多啦.</div>
            </vueWaterfallEasy>


        <!--<vueToTop ></vueToTop>-->
        <a href="javascript:;" @click="backTop" v-show="backToTop"
           style=" position: fixed;bottom: 30px;right: 30px; font-size: 20px; ">
            <img src="@/assets/back-to-top.png" width="50px;" height="50px;"/>
        </a>

    </div>
</template>


<script>
    import * as appServer from '../../store/appServerParams.js'
    import * as util from '../../assets/util.js'
    // import * as pps  from '../picpreview/ps/pps.js'

    import vueWaterfallEasy from 'vue-waterfall-easy'

    import wx from 'weixin-js-sdk'

    import vueToTop from 'vue-totop'

    export default {
        components: {
            vueWaterfallEasy , vueToTop
        },
        data() {
            return {
                headerInfo:{
                    Authorization:util.local(appServer.TOKEN)
                },
                imgsArr: [] ,
                toPreArr:[],
                wxPreviews : [] ,
                wxCurrentPreviews : '',

                icon1 : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560506027023&di=c9aab9b8888bc3c04d0644056f2f76f3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F86%2F89%2F8956ec576d4d7f5.jpg",
                shareLink : "",
                shareTitle : "分享标题11",
                shareDesc : "分享描述描述描述11",
                picFlowScroll : '',
                backToTop : false ,
            };
        },
        methods: {
            clickFn( event, { index, value } ){
                let vm =this;
                // 阻止a标签跳转
                event.preventDefault()
                // 只有当点击到图片时才进行操作
                if (event.target.tagName.toLowerCase() == 'img') {
                    console.log('img clicked',index, value)
                    let toOpen = parseInt(index)  ;
                    let tosShowArray  = this.toPreArr;
                    console.log( "IMG ARR " + tosShowArray  )
                    // pps.photoSwipeOpen(toOpen ,tosShowArray );

                    vm.wxCurrentPreviews = value.srcBig;
                    wx.previewImage({
                        current: vm.wxCurrentPreviews, // 当前显示图片的http链接
                        urls: vm.wxPreviews  // 需要预览的图片http链接列表
                    });
                }
            },
            testOpenImg(){
                console.log("aaaaaaaaaaaaaaa"  );
                let toOpen = 1 ;
                let images = [
                    {
                        src: appServer.BASE_URL + '/resources/photo/t1.jpg',
                        msrc: appServer.BASE_URL + '/resources/photo/t1s.jpg',
                        alt: 'picture1',
                        title: 'Image Caption 1',
                        w: 600,
                        h: 400
                    },
                    {
                        src: appServer.BASE_URL + '/resources/photo/t2.jpg',
                        msrc: appServer.BASE_URL + '/resources/photo/t2s.jpg',
                        alt: 'picture2',
                        title: 'Image Caption 2',
                        w: 1200,
                        h: 900
                    }
                ];

                let vm = this;
                console.log(vm);
                pps.photoSwipeOpen(toOpen ,images );
            },
            getData(){
                let vm = this;
                vm.$http.get('guest/getImgs', {
                        params: {
                            username: "",
                        }
                    }
                ).then(function (response) {
                    if( response.data.result ){
                        let imgs = response.data.imgs;
                        let tmpArr = [];
                        let tmpArr2 = [];
                        let wxArr3 = [];
                        for( let imgIndex in imgs ){
                            let tmpServerImg = imgs[imgIndex];
                            let tmpImg = {};
                            tmpImg.title = tmpServerImg.imgTitle;
                            tmpImg.info = tmpServerImg.imgDesc;
                            tmpImg.src = appServer.BASE_URL + tmpServerImg.img2Path;
                            tmpImg.srcBig = appServer.BASE_URL + tmpServerImg.imgPath;
                            tmpImg.href = appServer.BASE_URL + tmpServerImg.img2Path;
                            tmpImg.id = tmpServerImg.pid;
                            if( imgIndex == 4 || imgIndex ==6 ){
                                tmpImg.title = "";
                                tmpImg.info = "";
                            }
                            tmpArr.push(tmpImg);

                            let tmpImg2 = {};
                            tmpImg2.src = appServer.BASE_URL + tmpServerImg.imgPath;
                            tmpImg2.msrc = appServer.BASE_URL + tmpServerImg.img2Path;
                            tmpImg2.alt = tmpServerImg.imgTitle;;
                            tmpImg2.title =  tmpServerImg.imgDesc;
                            tmpImg2.w = tmpServerImg.imgWidth;
                            tmpImg2.h = tmpServerImg.imgHeight;
                            tmpArr2.push(tmpImg2) ;

                            wxArr3.push( appServer.BASE_URL + tmpServerImg.imgPath )

                        }
                        if( vm.imgsArr.length>66 ){
                            vm.$refs.waterfallObj.waterfallOver()
                        }else{
                            vm.imgsArr = vm.imgsArr.concat( tmpArr );
                            vm.toPreArr = vm.toPreArr.concat( tmpArr2 );
                            vm.wxPreviews = vm.wxPreviews.concat( wxArr3 );
                        }
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            wxConfig(datas){
                let vm = this;
                wx.config({
                    debug: false,
                    appId: datas.sign.appID , // 和获取Ticke的必须一样------必填，公众号的唯一标识
                    timestamp: datas.sign.timestamp, // 必填，生成签名的时间戳
                    nonceStr: datas.sign.noncestr, // 必填，生成签名的随机串
                    signature:  datas.sign.signature,// 必填，签名，见附录1
                    //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
                    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']
                });
                //处理验证失败的信息
                wx.error(function (res) {
                    logUtil.printLog('验证失败返回的信息:', res);
                });
                //处理验证成功的信息
                wx.ready(function () {
                        wx.onMenuShareAppMessage({
                            title: vm.shareTitle, // 分享标题
                            desc: vm.shareDesc, // 分享描述
                            link: vm.shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: vm.icon1, // 分享图标
                            type: 'link', // 分享类型,music、video或link，不填默认为link
                            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                            success: function (res) {
                                // 用户确认分享后执行的回调函数
                                console.log("分享给朋友成功返回的信息为:" + res);
                            },
                            cancel: function (res) {
                                // 用户取消分享后执行的回调函数
                                console.log("取消分享给朋友返回的信息为:" + res);
                            }
                        });
                });
            },
            getSignInfoFromServer() {
                let vm = this;
                let path = "guest/doShareSignForUrl";
                let params = new FormData();
                vm.shareLink =  window.location.href;
                params.append("shareUrl", vm.shareLink );
                vm.$http.post(path, params)
                    .then(function (response) {
                        if (response.data.result) {
                            vm.wxConfig(response.data);
                        } else {
                            vm.$message.error(vm.$t('Failed'));
                        }
                    }).catch(function (error) {
                    vm.$message.error(vm.$t('Failed'));
                    console.log(error)
                });
            },
            checkScroll( e , e1){
                let vm = this;
                let scrollTop = this.picFlowScroll.scrollTop ;
                let browserHeight = window.outerHeight;
                if (scrollTop > browserHeight) {
                    this.backToTop = true
                } else {
                    this.backToTop = false
                }
            },
            backTop() {
                // this.picFlowScroll.scrollTop = 0;
                let back = setInterval(() => {
                    if (this.picFlowScroll.scrollTop || this.picFlowScroll.scrollTop) {
                        this.picFlowScroll.scrollTop -= 100;
                    } else {
                        clearInterval(back);
                    }
                });
            },
        },
        created: function () {
            let vm = this
            vm.getSignInfoFromServer();
            vm.getData();
        },
        mounted(){
            this.picFlowScroll= document.getElementsByClassName('vue-waterfall-easy-scroll')[0] //获得dom对象x
            this.picFlowScroll.addEventListener('scroll', this.checkScroll)   //委托监听事件,handleScrol1为你要调用的方法
        },

    }
</script>
